import {ref, computed} from 'vue'
import {NCard, NScrollbar, NList, NListItem, NEmpty, NButton, NTag, NSpace, NTabs, NTabPane} from 'naive-ui'
import {useXianLuStore} from '#imports'
import {LazyIcon} from '#components'

export interface CangkuProps {
    value: boolean;
}

export default defineNuxtComponent({
    name: '仓库组件',
    props: {
        value: {
            type: Boolean,
            default: false
        }
    },
    emits: ['update:value'],
    setup(props: CangkuProps, {emit,}) {
        const store = useXianLuStore()
        const activeTab = ref('all')

        // 计算属性：获取物品列表
        const allItems = computed(() => store.itemList)

        // 根据标签筛选物品
        const filteredItems = computed(() => {
            if (activeTab.value === 'all') {
                return allItems.value
            } else {
                return allItems.value.filter((item:any) => item.type === activeTab.value)
            }
        })

        // 获取所有物品类型
        const itemTypes = computed(() => {
            const types = new Set<string>()
            allItems.value.forEach((item:any) => types.add(item.type))
            return Array.from(types)
        })

        // 根据物品类型获取颜色
        const getItemColor = (type: string) => {
            switch (type) {
                case 'wood':
                    return '#8B4513' // 棕色
                case 'misc':
                    return '#808080' // 灰色
                default:
                    return '#000000' // 黑色
            }
        }

        // 根据物品类型获取标签名称
        const getTypeName = (type: string) => {
            switch (type) {
                case 'wood':
                    return '木材'
                case 'misc':
                    return '杂物'
                default:
                    return type
            }
        }
        const handleClose = () => {
            emit('update:value', false)
        }

        // 渲染物品列表
        function renderItemList() {
            return filteredItems.value.length > 0 ? (
                <NList bordered={false}>
                    {filteredItems.value.map((item:any, index:number) => (
                        <NListItem key={index}>
                            <NSpace align="center">
                                <NTag type="info" style={{color: getItemColor(item.type)}}>
                                    {getTypeName(item.type)}
                                </NTag>
                                <span style={{fontWeight: 'bold'}}>{item.name}</span>
                                <span>数量: {item.amount}</span>
                                {item.description && (
                                    <span>描述: {item.description}</span>
                                )}
                            </NSpace>
                        </NListItem>
                    ))}
                </NList>
            ) : (
                <NEmpty description="没有找到物品"/>
            )
        }

        return () => (
            <div style={{
                display: props.value ? 'block' : 'none',
                position: 'fixed',
                right: '20px',
                bottom: '20px',
                width: '600px',
                height: '80%',
                zIndex: 1000,
                boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
                borderRadius: '8px',
                overflow: 'hidden'
            }}>
                <NCard title="仓库" bordered={false} style={{height: '100%'}}>
                    {{
                        "header-extra": () => <NButton onClick={handleClose} circle={true} quaternary={true}>
                            <LazyIcon name={"ant-design:close-outlined"} size={"16"}/>
                        </NButton>,
                        action: () => <NSpace justify={"end"}>
                            <NButton size={"small"} onClick={handleClose}>关闭</NButton>
                        </NSpace>,
                        default: () => <NTabs value={activeTab.value}
                                              onUpdateValue={(value) => activeTab.value = value}>
                            <NTabPane name="all" tab="全部">
                                <NScrollbar style={{maxHeight: 'calc(100% - 80px)'}}>
                                    {renderItemList()}
                                </NScrollbar>
                            </NTabPane>

                            {itemTypes.value.map(type => (
                                <NTabPane key={type} name={type} tab={getTypeName(type)}>
                                    <NScrollbar style={{maxHeight: 'calc(100% - 80px)'}}>
                                        {renderItemList()}
                                    </NScrollbar>
                                </NTabPane>
                            ))}
                        </NTabs>
                    }}
                </NCard>
            </div>
        )
    }
})